<template>
	<!--选择设备-设备列表 -->
	<view class="wrap">
		<view class="device-list-header">
			<u-search shape="square" placeholder="请输入设备名称或MAC地址" input-align="left" height="70" maxlength="690"
				margin="20rpx 30rpx 30rpx 30rpx" bg-color="#ffffff" border-color="#e9e9e9" :show-action="false"
				v-model="searchKey" @custom="onSearch" @clear="searchClear" @search="onSearch">
			</u-search>
			<view class="record">共<text style="color: #fb5151">{{deviceList.length}}</text>条记录</view>
		</view>
		<view class="device-list">
			<device-item v-for="(item,index) in deviceList" :key="index" :device="item" @deviceClick="deviceClick">
			</device-item>
		</view>
	</view>
</template>

<script>
	import deviceItem from './components/device-item.vue'
	export default {
		components: {
			deviceItem
		},
		data() {
			return {
				searchKey: '',
				deviceList: [{
						name: '设备A',
						busNo: '湘A7866',
						no: '7765',
						mac: '45-16-38-64-87-98'
					},
					{
						name: '设备A',
						busNo: '湘A7866',
						no: '7766',
						mac: '45-16-38-64-87-98'
					},
					{
						name: '设备A',
						busNo: '湘A7866',
						no: '7767',
						mac: '45-16-38-64-87-98'
					},
					{
						name: '设备A',
						busNo: '湘A7866',
						no: '7768',
						mac: '45-16-38-64-87-98'
					},
				]
			}
		},
		methods: {
			onSearch() {

			},
			searchClear() {

			},
			deviceClick(val) {
				let device = this.deviceList.find((item) =>
					item.no === val
				)

				this.$EventBus.$emit('deviceSelect', device)
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		display: flex;
		flex-direction: column;


		.device-list-header {
			display: flex;
			flex-direction: column;
			background: #f5f5f5;

		}

		.record {
			padding: 30rpx;
			background-color: #ffffff;
			border-bottom: 2rpx solid #e9e9e9;
			text{padding:0 4rpx;}
		}
	}
</style>
